<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product showcase</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="impress">
        <div class="step" data-x="0" data-y="0">
            <div class="flex">
                <div class="info">
                    <h1>aljsgla</h1>
                    <p>aglkdgjlakjhglkjhlkjhl</p>
                </div>
                <div class="image">
                    <img src="1.png" alt="" srcset="">
                </div>
            </div>
        </div>
        <div class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190">
            <div class="flex">
                <div class="image">
                    <img src="1.png" alt="" srcset="">
                </div>
                <div class="info">
                    <h1>aljsgla</h1>
                    <p>aglkdgjlakjhglkjhlkjhl</p>
                </div>
            </div>
        </div>
        <div class="step" data-x="-3000" data-y="600" data-scale="0.2" data-rotate="270">
            <div class="slide">
                <div class="image">
                    <img src="1.png" alt="" srcset="">
                </div>
                <div class="info">
                    <h1>aljsgla</h1>
                    <p>aglkdgjlakjhglkjhlkjhl</p>
                </div>
            </div>
        </div>
        <div class="step" data-x="-200" data-y="1500" data-rotate="180">
            <div class="slide">
                <div class="info">
                    <h1>aljsgla</h1>
                    <p>aglkdgjlakjhglkjhlkjhl</p>
                </div>
                <div class="image">
                    <img src="1.png" alt="" srcset="">
                </div>
            </div>
        </div>
    </div>

    <div class="control-btn">
        <div><button id="arrowLeft"><span>
                    << /span></button></div>
        <div><button id="arrowRight"><span>></span></button></div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="impress.js"></script>
    <script>
        impress().init();
        $(function () {
            let imp = impress();

            $("#arrowLeft").click(function (e) {
                imp.prev();
                e.preventDefault();
            })

            $("#arrowRight").click(function (e) {
                imp.next();
                e.preventDefault();
            })
        })
    </script>
</body>

</html>